<template>
  <div class="right-board" style="width:480px;background:white;height:100vh;overflow-y: auto;">
    <div style="font-weight: bold;font-size: 15px;border-bottom:1px solid rgba(168, 167, 167, 0.3);padding:10px 20px">{{showField?activeData.__config__.label+'设置':'设置'}}</div>
    <div v-show='showField'>
       <el-scrollbar class="right-scrollbar">
          <right-panel1 :activeData="activeData"></right-panel1>
          <right-panel2 :activeData="activeData"></right-panel2>
          <right-panel3 :activeData="activeData"></right-panel3>
        </el-scrollbar >
    </div>
  </div>
</template>

<script>
import RightPanel1 from './RightPanel1.vue'
import RightPanel2 from './RightPanel2.vue'
import RightPanel3 from './RightPanel3.vue'
import { basicComponents } from './mobileConfig'
export default {
  components: {
    RightPanel1,
    RightPanel2,
    RightPanel3
  },
  props: ['activeData','showField'],
  data() {
    return {
      label:''
    }
  },
  mounted(){
  },
  created(){
    if(!this.activeData){
      this.activeData = basicComponents[0];
    }
  },
  computed: {
   
  },
  watch:{
    
  },
  methods: {
    
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/mobileRightPanel';
</style>
